<template>
	<view class="main">
		<view id="tab-bar" class="tab-bar">
			<!-- #ifdef MP-WEIXIN || MP-ALIPAY  -->
			<u-navbar title="我的订单" <!-- #ifdef MP-WEIXIN -->
				leftIconSize="40rpx"
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				leftIconSize="0rpx"
				<!-- #endif -->
				:safeAreaInsetTop="true"
				:placeholder="true"
				:autoBack="true"
				bgColor="#F7F8F7"
				>
			</u-navbar>
			<!-- #endif -->
			<u-tabs :scrollable="false" :list="tabsList" lineWidth="20" lineHeight="5" lineColor="#F7F8F7"
				itemStyle="padding-left: 32rpx; padding-right: 32rpx; height: 70rpx;" :activeStyle="{
					        color: '#303133',
					        fontWeight: 'bold',
					        transform: 'scale(1.01)'
					    }" :inactiveStyle="{
					        color: '#606266',
					        transform: 'scale(1)'
					    }" :current="currentTabIndex" @click="tabClick">
			</u-tabs>
		</view>
		<view id="order-state" class="order-state">
			<view v-for="(stateItem, stateIndex) in stateList" :key="stateIndex" v-if="stateItem.isShow"
				:class="status == stateItem.status ? 'state-item-active' : 'state-item'"
				@click.stop="stateCheck(stateItem.status)">
				{{ stateItem.name }}
			</view>
		</view>

		<scroll-view scroll-y :style="{height:scrollerHeight + 'px'}" @scrolltolower="onreachBottom">
			<view class="swiper-group" v-if="orderList.length > 0">
				<view class="scroll-content" v-for="(items, indexs) in orderList" :key="indexs">
					<view class="item">
						<view class="item-top">
							<view class="item-line">
								<view class="item-line-title">
									时间：
								</view>
								<view class="item-line-value">
									{{items.createTime | formatDate}}
								</view>
							</view>
							<view class="item-status">
								<view v-if="items.status == 0" class="top-tag color-primary m-flex-column">待支付</view>
								<view v-else-if="items.status == 1" class="top-tag color-primary m-flex-column">待使用
								</view>
								<view v-else-if="items.status == 2"
									class="top-tag-complete color-success m-flex-column">已完成</view>
								<view v-else-if="items.status == 3" class="top-tag-complete m-flex-column">退单</view>
								<view v-else-if="items.status == 4" class="top-tag color-primary m-flex-column">拼团中
								</view>
								<view v-else-if="items.status == 5" class="top-tag-complete m-flex-column">拼团失败</view>
								<view v-else-if="items.status == 8"
									class="top-tag-complete color-primary m-flex-column">退款中</view>
								<view v-else-if="items.status == 9"
									class="top-tag-complete color-primary m-flex-column">退款失败</view>
							</view>
						</view>
						<view class="item-center">
							<view class="item-line" v-if="items.mchType == 7">
								<view class="item-line-value">
									<view class="item-line-goods item-line-value-line">
										<view class="item-line-value-line-value">
											<view>
												商品描述：
											</view>
										</view>
										<view class="item-line-value-line-count">
											{{items.title}}
										</view>
									</view>
								</view>
							</view>
							<view class="item-line" v-else>
								<view class="item-line-title">
									商品：
								</view>
								<view class="item-line-value"
									v-if="items.commodityList && items.commodityList.length > 0">
									<view class="item-line-goods item-line-value-line"
										v-for="(goods,goodsIndex) in items.commodityList" :key="goodsIndex">
										<view class="item-line-value-line-value">
											<view>{{goods.name}}</view>
											<view style="display: flex;align-items: center;">
												<text class="shipment-status-disable"
													v-if="goods.orderItemShipmentStatus==shipmentStatusEnum.FAIL">出货失败</text>
												<text class="shipment-status-wait"
													v-else-if="goods.orderItemShipmentStatus==shipmentStatusEnum.WAIT">待出货</text>
												<text class="shipment-status-success"
													v-else-if="goods.orderItemShipmentStatus==shipmentStatusEnum.SUCCESS">出货成功</text>
												<text class="shipment-status-wait"
													v-else-if="goods.orderItemShipmentStatus==shipmentStatusEnum.PART_FAIL">{{goods.orderItemShipmentFailureNum}}个出货失败</text>
												<text class="shipment-status-wait"
													v-else-if="goods.orderItemShipmentStatus==shipmentStatusEnum.RESHIPMENT">重新出货中</text>

											</view>
										</view>
										<view class="item-line-value-line-count">
											×{{goods.num}}
										</view>
									</view>
								</view>
								<view class="item-line-value" v-else>
									<view class="item-line-goods item-line-value-line">
										<view class="item-line-value-line-value">
											<view v-if="items.type != 7">
												{{items.title}}
											</view>
											<view>
												<text v-if="items.type == 4">储值套餐
													{{Number(items.rechargeCoin) + Number(items.donateCoin)}}
													个游戏币</text>
												<text v-else-if="items.type == 0 || items.type == 7">
													<text
														v-if="deviceTypeEnum.MARSHMALLOW != items.deviceTypeId">游戏币（个）</text>
												</text>
											</view>
										</view>
										<view class="item-line-value-line-count">
											×{{items.quantity}}
										</view>
									</view>
								</view>
							</view>
							<view class="item-total-price">
								<text class="item-total-price-title">
									<text v-if="items.mchType == 3">
										（现金）
									</text>
									<text>实付款</text>
								</text>
								<view class="item-total-price-value">
									<text class="item-total-price-symbol">￥</text>
									<text
										class="item-total-price-price">{{items.totalAmount ? items.totalAmount.toFixed(2) : 0}}</text>
								</view>
							</view>
							<view class="item-line">
								<view class="item-line-title">
									单号：
								</view>
								<view class="item-line-value">
									<view class="item-line-value-line">
										<view class="item-line-value-line-value">
											{{items.outTradeNo}}
										</view>
										<view class="item-line-value-line-copy"
											@click.stop="copyCode(items.outTradeNo)">
											复制
										</view>
									</view>
								</view>
							</view>
							<view class="item-line">
								<view class="item-line-title">
									门店：
								</view>
								<view class="item-line-value">
									{{items.storeName}}
									<text v-if="items.deviceNo">
										（{{items.deviceNo}}-{{items.deviceTypeName}}）
									</text>
								</view>
							</view>
						</view>
						<view class="bottom">
							<view>
								遇到问题？
							</view>
							<view class="bottom-grid">
								<view class="bottom-grid-item" @click="toMobile(items)">
									<view>
										<!--										<u-image :src="`/static/image/order/contact-seller.png`" width="34rpx" height="34rpx" mode="aspectFit"></u-image>-->
										<u-image :src="`${staticFileUrl}/image/order/contact-seller.png`" width="34rpx"
											height="34rpx" mode="aspectFit"></u-image>
									</view>
									<view class="grid-item-title">
										联系卖家
									</view>
								</view>
								<view class="bottom-grid-item" @click="navDetail(items)">
									<view>
										<!--										<u-image :src="`/static/image/order/view-order-detail.png`" width="34rpx" height="34rpx" mode="aspectFit"></u-image>-->
										<u-image :src="`${staticFileUrl}/image/order/view-order-detail.png`"
											width="34rpx" height="34rpx" mode="aspectFit"></u-image>
									</view>
									<view class="grid-item-title">
										查看详情
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-else text="暂无订单" mode="order" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</scroll-view>
	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->	
		<u-modal :show="show" :showConfirmButton="false" :closeOnClickOverlay="true" :showCancelButton="false"
			@close="show=false">
			<view class="groupon m-flex-column u-row-around"
				:style="[{backgroundImage:'url('+staticFileUrl+'/image/activity/invite_groupon.png)' }]">
				<view class="title">邀请好友拼团</view>
				<view class="m-flex-row">
					<view class="">还差{{grouponMemberList[0].grouponNum}}人成团 剩余 </view>
					<view class="count-down">
						<u-count-down :time="downtime" format="HH:mm:ss" autoStart millisecond @change="onChange">
							<view style="display: inline;" v-if="timeData.days>0">{{ timeData.days}}天</view>\t
							<text>{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>\t : \t
							<text>{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}</text>\t:\t
							<text>{{ timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}</text>
						</u-count-down>
					</view>
					<view class=""> 结束</view>
				</view>
				<view class="m-flex-row">
					<view class="avatar-item" v-for="(item,index) of grouponMemberList" :key="index">
						<image class="into-img" mode="aspectFill" :src="item.headImgUrl"></image>
						<view class="tuanzhang" v-if="item.isHead">团长</view>
					</view>
					<view class="avatar-item" v-for="(item,index) of grouponMemberList[0].grouponNum" :key="index">
						<u-avatar fontSize="22"></u-avatar>
					</view>
				</view>
				<view style="position: relative;">
					<button open-type="share" :data-id="1" class="bot-share" :data-title="activity.title">邀请好友</button>
					<u-image :src="`${staticFileUrl}/image/order/invite-friend.png`" width="428rpx"
						height="72rpx"></u-image>
				</view>
			</view>
		</u-modal>
	<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				activityOrderPayStateEnum: this.$activityOrderPayStateEnum,
				staticFileUrl: this.$configPath.staticFileUrl,
				imageUrl: this.$configPath.imageUrl,
				show: false,
				pic: null,
				// 这里的顺序不能变，变了会好大祸
				tabsList: [],
				stateList: [],
				currentTabIndex: 0,
				type: 0,

				scrollerHeight: 0,
				swiperContentHeight: 0,
				orderList: [],
				status: -1,
				downtime: 0 * 1000,
				timeData: null,
				grouponMemberList: [{
					grouponNum: 1
				}],
				loadStatus: 'loadmore',
				pageNum: 0,
				order: {},
				deviceTypeEnum: this.$deviceTypeEnum,
				shipmentStatusEnum: this.$shipmentStatusEnum,
				
				tabsListTemp: [
					{
						name: '全部',
						type: 0,
					},
					{
						name: '购买',
						type: 7,
					},
					{
						name: '储值',
						type: 4,
					},
					{
						name: '凭证',
						type: 5,
					},
					{
						name: '秒杀',
						type: 1,
					},
					{
						name: '拼团',
						type: 2,
					},
					// {
					//   name: '兑换',
					//   type: 6,
					// }
				],
				
				stateListTemp: [
					{
						id: 1,
						status: -1,
						name: '全部',
						isShow: true,
					},
					{
						id: 2,
						status: 0,
						name: '待付款',
						isShow: true,
					},
					{
						id: 3,
						status: 4,
						name: '进行中',
						isShow: true,
					},
					{
						id: 4,
						status: 1,
						name: '待使用',
						isShow: true,
					},
					{
						id: 5,
						status: 2,
						name: '已完成',
						isShow: true,
					},
					{
						id: 6,
						status: 7,
						name: '已退款',
						isShow: true,
					},
				]
			}
		},
		//第一次加载
		onLoad(e) {
			// #ifdef MP-ALIPAY || H5
				this.tabsList = this.tabsListTemp;
				this.stateList = this.stateListTemp;
			//#endif
			// #ifdef MP-WEIXIN
			const appId = uni.getAccountInfoSync().miniProgram.appId;
			if (appId == 'wx97240d9e4f975f9c') {
				this.tabsList = [
					{
						name: '全部',
						type: 0,
					},
					{
						name: '购买',
						type: 7,
					}
				];
				
				this.stateList = [
					{
						id: 1,
						status: -1,
						name: '全部',
						isShow: true,
					},
					{
						id: 2,
						status: 0,
						name: '待付款',
						isShow: true,
					},
					{
						id: 5,
						status: 2,
						name: '已完成',
						isShow: true,
					},
					{
						id: 6,
						status: 7,
						name: '已退款',
						isShow: true,
					},
				]
			} else {
				this.tabsList = this.tabsListTemp;
				this.stateList = this.stateListTemp;
			}
			//#endif
			
			
			if (this.$Route.query) {
				if (this.$Route.query.status) {
					this.status = this.$Route.query.status;
				}
				if (this.$Route.query.activityTypeId) {
					let typeId = this.$Route.query.activityTypeId;
				}
			}
			this.init();
		},
		onReady() {
			this.getPomHeight()
		},
		methods: {
			getPomHeight1() {
				my.createSelectorQuery().select('#tab-bar').boundingClientRect().exec((rect) => {
					let tabBarHeight = rect[0].height;
					my.createSelectorQuery().select('#order-state').boundingClientRect().exec((res) => {
						let orderStateHeight = res[0].height;
						let windowHeight = my.getSystemInfoSync().windowHeight;
						this.scrollerHeight = windowHeight;
						this.scrollerHeight -= tabBarHeight;
						this.scrollerHeight -=
						orderStateHeight; // console.log("this.scrollerHeight：" + this.scrollerHeight) });
					});
				});
			},
			getPomHeight() {
				let query = wx.createSelectorQuery().in(this)
				query.select('#tab-bar').boundingClientRect()
				query.select('#order-state').boundingClientRect()
				query.exec(res => {
					let windowHeight = wx.getSystemInfoSync().windowHeight
					this.scrollerHeight = windowHeight
					// console.log("this.scrollerHeight：" + this.scrollerHeight)
					for (let i = 0; i < res.length; i++) {
						if (res[i]) {
							this.scrollerHeight -= res[i].height;
						}
					}
				})
			},
			//分享
			onShareAppMessage(res) {
				let imgUrl = '';
				if (this.$u.test.isEmpty(this.order.picture)) {
					imgUrl = this.initDefaultActivityPic(this.order.activityTypeId);
				} else {
					imgUrl = this.imageUrl + this.order.picture;
				}
				return {
					title: this.order.describe ? this.order.describe : this.order.title,
					imageUrl: imgUrl,
					path: '/pages-activity/activity-detail/activity-detail?activityId=' + this.order.activityId +
						'&activityTypeId=' + this.order.activityTypeId
				}
			},
			init() {
				this.findMemberOrderList();
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				// console.log("加载更多 ....")
				if (this.loadStatus == 'nomore') {
					return;
				}
				this.loadStatus = "loading";
				setTimeout(() => {
					this.findMemberOrderList();
				}, 500);
			},
			// tabs通知swiper切换
			tabClick(item) {
				// console.log("item", item)
				this.type = item.type;
				this.currentTabIndex = item.index;
				this.orderList = [];
				this.pageNum = 0;
				this.loadStatus = "loading";
				this.findMemberOrderList();

				if (this.currentTabIndex == 1) {
					this.stateList[2].isShow = false;
					this.stateList[3].isShow = false;
				} else if (this.currentTabIndex == 2) {
					this.stateList[2].isShow = false;
					this.stateList[3].isShow = false;
				} else if (this.currentTabIndex == 3) {
					this.stateList[2].isShow = false;
					this.stateList[3].isShow = true;
				} else if (this.currentTabIndex == 4) {
					this.stateList[2].isShow = false;
					this.stateList[3].isShow = true;
				} else if (this.currentTabIndex == 6) {
					this.stateList[2].isShow = false;
					this.stateList[3].isShow = false;
				} else {
					for (let i = 0; i < this.stateList.length; i++) {
						this.stateList[i].isShow = true;
					}
				}
			},
			stateCheck(index) {
				this.status = index;
				this.orderList = [];
				this.pageNum = 0;

				this.loadStatus = "loading";
				this.findMemberOrderList();
			},
			//获取订单
			findMemberOrderList() {
				uni.showLoading({
					title: '加载中'
				})
				const params = {
					type: this.type,
					status: this.status,
					pageNum: ++this.pageNum,
					merchantStoreId: getApp().globalData.currMerchantStore.id ? getApp().globalData.currMerchantStore.id : '',
				}
				this.$api('member.findMemberOrderList', params).then(res => {
					uni.hideLoading();
					if (res.status == 0) {
						this.loadStatus = res.data.length === 10 ? 'loadmore' : 'nomore';
						this.orderList = [...this.orderList, ...res.data]; //合并数组
						this.$nextTick(() => {
							this.getPomHeight()
						});
						// console.log("this.orderList.length：" + this.orderList.length)
					} else {
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			copyCode(value) {
				uni.setClipboardData({
					data: value,
					success: () => {
						this.$helpers.toast('复制成功');
					}
				});
			},
			toOrderDescribe(item) {
				if ((item.type == 1 || item.type == 2 || item.type == 5) && (item.status == 1 || item.status == 2)) {
					uni.$u.route({
						url: 'pages-activity/order-detail/order-detail',
						params: {
							id: item.id
						}
					})
				}
			},
			//邀请好友
			shardFriend(item) {
				this.show = true;
				this.order = item;
				this.findGrouponMemberList(item);
			},
			onChange(e) {
				this.timeData = e
				// console.log(e,"kkkkkkkkkkk")
			},
			//查询拼团人员列表
			findGrouponMemberList(item) {
				this.$api('activity.findGrouponMemberList', {
					grouponOrderNo: item.grouponOrderNo
				}).then(res => {
					if (res.status == 0) {
						this.grouponMemberList = res.data;
						// console.log(this.grouponMemberList)
						this.downtime = this.formatTime(this.grouponMemberList[0].grouponLimitTime);
					} else {
						this.$helpers.toast('请求数据失败:' + res.msg);
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			formatTime(item) {
				let nowTime = new Date().getTime();
				let endTime = new Date(item).getTime();
				let t = (endTime - nowTime);
				return t;
			},
			initDefaultActivityPic(activityTypeId) {
				if (activityTypeId == 1) {
					return this.$configPath.staticFileUrl + '/image/activity/create-activity.png'
				} else if (activityTypeId == 2) {
					return this.$configPath.staticFileUrl + '/image/activity/create-groupon-activity.png'
				} else if (activityTypeId == 3) {
					return this.$configPath.staticFileUrl + '/image/activity/create-activity.png'
				} else if (activityTypeId == 4) {
					return this.$configPath.staticFileUrl + '/image/activity/activity-recharge.svg'
				}
			},
			// 查看订单详情
			navDetail(item) {
				uni.navigateTo({
					url: '/pages-member/my-order/my-order-detail/my-order-detail?outTradeNo=' + item.outTradeNo +
						"&type=" + this.type + '&deviceNo=' + item.deviceNo + '&isBluetooth=' + item.isBluetooth + '&payStatus=' + item.payStatus
				})
			},
			// 联系卖家
			toMobile(item) {
				let phone = item.serviceMobilePhone || item.serviceFixedTelephone;
				if (!phone) {
					this.$helpers.toast('商家暂未预留联系电话');
					return;
				}
				uni.makePhoneCall({
					phoneNumber: phone,
				})
			}

		},

	}
</script>

<style lang="scss" scoped>
	.main {
		height: 100vh;
		font-size: 26rpx;
		background-color: #F7F8F7;
		display: flex;
		flex-direction: column;

		.tab-bar {
			padding: 10rpx 20rpx 0px;
			background: rgb(247, 248, 247);
		}

		/deep/ .u-tabs__wrapper__nav__line {
			bottom: 0px;
		}

		/deep/ .u-tabs__wrapper__nav__item__text {
			font-size: 28rpx;
		}

		.color-red {
			color: red !important;
		}

		.color-primary {
			color: rgb(234, 97, 0) !important;
		}

		.color-success {
			color: rgb(39, 161, 119) !important;
		}

		.color-purple {
			color: #7E7DF3 !important;
		}

		.font-color-07 {
			color: rgba(0, 0, 0, 0.7) !important;
		}

		.order-state {
			padding: 30rpx 20rpx;
			box-sizing: border-box;
			background-color: #F7F8F7;
			display: flex;
			flex-direction: row;
			width: 100%;
			justify-content: space-around;
			align-items: center;

			.state-item-active {
				text-align: center;
				color: white;
				background-color: #7E7DF3;
				font-size: 24rpx;
				width: 106rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.state-item {
				text-align: center;
				color: rgba(0, 0, 0, 0.4);
				border: 0.01rem solid #D0D0D0;
				font-size: 24rpx;
				width: 106rpx;
				height: 46rpx;
				line-height: 46rpx;
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.swiper-group {
			// padding: 12rpx 0 24rpx 0;
			padding: 20rpx 24rpx;
			font-size: 28rpx;

			.scroll-content {
				.item {
					padding: 0 30rpx;
					margin-bottom: 20rpx;
					background-color: white;
					font-size: 28rpx;
					border-radius: 20rpx;

					.item-line {
						display: flex;

						.item-line-title {
							width: 90rpx;
							color: rgba(0, 0, 0, 0.9);
						}

						.item-line-value {
							flex: 1;
							color: rgba(0, 0, 0, 0.6);
							// 强制换行
							word-wrap: break-word;
							// 强制英文单词换行
							word-break: break-word;
							overflow: hidden;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;

							.item-line-value-line {
								display: flex;
								align-items: center;

								.item-line-value-line-value {

									flex: 1;
									overflow: hidden;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: horizontal;

									text {
										box-sizing: border-box;
										border-radius: 15px;
										padding-block: 3rpx;
										padding-inline: 10rpx;
										font-size: 18rpx;
										margin-left: 20rpx;
									}

									.shipment-status-disable {
										border: 1px solid rgb(255, 0, 0);
										color: rgb(255, 0, 0);
									}

									.shipment-status-success {
										border: 1px solid rgb(39, 161, 119);
										color: rgb(39, 161, 119);
									}

									.shipment-status-wait {
										border: 1px solid rgb(234, 97, 0);
										color: rgb(234, 97, 0);
									}
								}

								.item-line-value-line-count {
									color: rgba(0, 0, 0, 0.9);
									margin-left: 10rpx;
								}

								.item-line-value-line-copy {
									color: rgba(0, 0, 0, 0.7);
									margin-left: 10rpx;
								}
							}
						}
					}

					.item-top {
						display: flex;
						justify-content: space-between;
						align-items: center;

						padding: 30rpx 0;

						.item-time {
							flex: 1;
						}

						.item-status {
							font-weight: 700;
						}
					}

					.item-center {
						padding: 24rpx 0;
						border-bottom: 1rpx solid #E9E9E9;
						border-top: 1rpx solid #E9E9E9;

						.item-line {
							margin-bottom: 30rpx;

							.item-line-goods {
								margin-bottom: 30rpx;
							}
						}

						.item-line:last-child {
							margin-bottom: 0;
						}
					}

					.bottom {
						padding: 30rpx 0;

						.bottom-grid {
							margin-top: 30rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.bottom-grid-item {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: center;

								.grid-item-title {
									margin-left: 14rpx;
								}
							}
						}
					}

					.item-total-price {
						margin-bottom: 30rpx;
						padding: 0 18rpx;
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.item-total-price-title {
							color: rgba(0, 0, 0, 0.6);
						}

						.item-total-price-value {
							color: #7E7DF3;
							margin-left: 18rpx;
							display: flex;
							align-items: center;

							.item-total-price-symbol {
								font-size: 24rpx;

							}

							.item-total-price-price {
								font-size: 48rpx;
								margin-left: 14rpx;
							}
						}
					}
				}
			}

		}
	}

	/deep/ .u-border-bottom:after {
		border-bottom-width: 0rpx;
	}

	.groupon {
		height: 400rpx;
		width: 626rpx;
		background-color: #fff;
		font-size: 24rpx;

		.title {
			color: rgba(0, 0, 0, 0.9);
			font-size: 30rpx;
			font-weight: bold;
		}

		.bot-share {
			position: absolute;
			height: 70rpx;
			width: 420rpx;
			opacity: 0;
			background-color: aqua;
			z-index: 100;
			top: 20rpx;
		}

		.avatar-item {
			margin: 0rpx 20rpx;
			position: relative;

			.tuanzhang {
				background: linear-gradient(rgba(255, 146, 146, 255) 0%, rgba(255, 77, 77, 255) 100%);
				border-radius: 4px;
				position: absolute;
				font-size: 24rpx;
				width: 68rpx;
				color: white;
				font-size: 24rpx;
				height: 36rpx;
				text-align: center;
				bottom: -16rpx;
				left: 10rpx;
			}

			.into-img {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				background-color: #ccc;
			}
		}

		.count-down {
			color: rgb(255, 86, 86);
			font-size: 22rpx;
			line-height: 29rpx;
			margin: 0rpx 10rpx;

			text {
				padding: 6rpx;
				background: rgb(255, 221, 221);
				border-radius: 6rpx;
				color: rgb(255, 86, 86);
			}

			/deep/.u-count-down {
				display: block !important;
			}
		}

		.can-btn {
			margin-top: 20rpx;
			width: 428rpx;
			height: 72rpx;
			color: white;
			border-radius: 60px;
		}
	}
</style>
